<template>
  <view class="component list-item-view">
    <TextChecked v-if="type === 'textChecked'" :data="data" />
    <!-- TextDeleted的数据个数: {text: '1234567890',value: '1234567890' -->
    <TextDeleted v-if="type === 'textDeleted'" :data="data" />
    <ProductInfoView v-if="type === 'product'" :data="data" @onAdd="handleAdd">
      <template #operate="data">
        <view @click="handleTest(data)">测试</view>
      </template>
    </ProductInfoView>
  </view>
</template>

<script setup>
import TextChecked from './modules/text-checked.vue';
import TextDeleted from './modules/text-deleted.vue';
import ProductInfoView from '@/components/base-components/product-info-view/product-info-view.vue';

  const props = defineProps({
    type: {
      type: String, // default product
      default: 'textChecked'
    },
    data: Object, // 数据
    checked: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: () => {
        return {};
      }
    }
  });

  const TYPE = {
    default: 'default',
    check: 'check'
  }

  const computedType = computed(() => {
    return TYPE[props.type];
  })


  const emit = defineEmits(['selected', 'add', 'edit', 'input']);

  // 获取当前组件的ref
  const selfRef = ref();

  // 获取透传的属性
  const attrs = useAttrs();

  const internalConfig = ref({

  });

  const mergeConfig = computed(() => {
    return {
      ...internalConfig.value,
      ...props.config
    }
  });

  // 计算属性，用于合并默认值和透传的属性
const computedAttrs = computed(() => ({
  ...props,
  ...attrs,
}));

const handleClick = () => {
  console.log('props.data', props.data, 'computedAttrs.data', computedAttrs, computedAttrs.value, computedAttrs.data);
  emit('selected', computedAttrs.value.data);
}

const handleTest = (data) => {
  console.log("🚀 ~ handleTest ~ data:", data)
}

const operateFn = (type, data) => {
  // 调用父级事件type , 数据data
  emit(type, data);
}
provide('operate', operateFn);

const handleAdd = () => {

}
</script>

<style lang="scss" scoped>
@import "@/static/scss/theme.scss";
.list-item-view {
  // margin: 24rpx 32rpx;
}
.text-check-item {
  font-size: 26rpx;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    font-size: 26rpx;
  }
  .icon {
    visibility: hidden;
  }
  &.item-text-checked {
    color: $primary-color;

    .icon {
      visibility:visible;
    }
  }

}
</style>
